<template>
  <div>
    <el-row :span="24">
      <el-col :span="10">
        <basic-container>
          <div class="info">

           
          </div>
        </basic-container>
      </el-col>
      <el-col :span="14">
        <basic-container>
          <avue-data-icons :option="easyDataOption2"></avue-data-icons>
        </basic-container>
      </el-col>
    </el-row>
    <basic-container>
      <avue-data-box :option="easyDataOption"></avue-data-box>
    </basic-container>
    <basic-container>
      <avue-crud :data="data"
                 :option="tableOption">
        <template slot-scope="scope"
                  slot="username">
          <el-tag>{{scope.row.username}}</el-tag>
        </template>
        <template slot-scope="scope"
                  slot="stars">
          <a :href='scope.row.git'
             target="_blank">
            <img :src="scope.row.stars"
                 alt='star' />
          </a>
        </template>
        <template slot-scope="scope"
                  slot="address">
          <a :href="scope.row.git"
             target="_blank">{{scope.row.address}}</a>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: "wel",
  data () {
    return {
      tableOption: {
        "border": true,
        "index": true,
        "expand": true,
        "stripe": true,
        "selection": true,
        "page": false,
        "menuAlign": "center",
        "align": "center",
        "dic": ['type'],
        "column": [{
          "label": "用户名",
          "prop": "username",
          "width": 120,
          "span": 24,
          "solt": true,
          "sortable": true,
          "rules": [{
            "required": true,
            "message": "请输入用户名",
            "trigger": "blur"
          }]
        },
        {
          "label": "类型",
          "prop": "type",
          "width": 80,
          "type": "select",
          "sortable": true,
          "dicData": [{
            label: '前端',
            value: 0,
          }, {
            label: '后端',
            value: 1,
          }]
        },
        {
          "label": "stars",
          "width": "150",
          "prop": "stars",
          "sortable": true,
          "solt": true,
        },
        {
          "label": "码云",
          "solt": true,
          "span": 24,
          "prop": "address",
          "type": "textarea",
          "overHidden": true
        }, {
          "label": "项目介绍",
          "width": "300",
          "prop": "info",
          "editDisabled": true,
          "formHeight": 200,
          "type": "ueditor",
          "span": 24,
          "overHidden": true
        },
        ]
      },
      data: [{
        username: "lengleng",
        name: "lengleng",
        number: 12,
        type: '0',
        stars: 'https://gitee.com/log4j/pig/badge/star.svg?theme=white',
        git: 'https://gitee.com/log4j/pig',
        address: "https://gitee.com/log4j",
        info: 'Pig是基于Spring Cloud、OAuth2.0，使用Vue前后分离的开发平台,支持账号、 短信、 SSO等多种登录。 ',
      },
      {
        username: "smallwei",
        name: "smallwei",
        number: 20,
        type: '1',
        stars: 'https://gitee.com/smallweigit/avue/badge/star.svg?theme=white',
        git: 'https://gitee.com/smallweigit/avue',
        address: "https://gitee.com/smallweigit",
        info: 'Avue是一个后台集成解决方案，它基于 Vue.js 和 element。 使用了最新的前端技术栈，支持权限验证，第三方网站嵌套等功能。',
      }],
      easyDataOption2: {
        // color: 'rgb(63, 161, 255)',
        span: 6,
        discount: true,
        data: [
          {
            title: '错误日志',
            icon: 'icon-cuowu'
          },
          {
            title: '数据展示',
            icon: 'icon-shujuzhanshi2'
          },
          {
            title: '权限管理',
            icon: 'icon-jiaoseguanli'
          },
          {
            title: '菜单管理',
            icon: 'icon-caidanguanli'
          }]
      },
      easyDataOption: {
        data: [
          {
            title: '错误日志',
            count: 12332,
            icon: 'icon-cuowu',
            color: 'rgb(49, 180, 141)',
          },
          {
            title: '数据展示',
            count: 33,
            icon: 'icon-shujuzhanshi2',
            color: 'rgb(56, 161, 242)',
          },
          {
            title: '权限管理',
            count: 2223,
            icon: 'icon-jiaoseguanli',
            color: 'rgb(117, 56, 199)',
          },
        ]
      }
    };
  },
  computed: {

  },
  created () {

  },
  methods: {

  }
};
</script>

<style scoped="scoped" lang="scss">
.info {
  padding: 21px 0;
  display: flex;
  align-items: center;
  .img-border {
    width: 64px;
    height: 65px;
    position: relative;
  }
  .img-v {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
  }
  .img {
    border-radius: 5px;
    width: 64px;
    height: 64px;
    display: inline-block;
    overflow: hidden;
    img {
      display: block;
      max-width: none;
      height: 64px;
      opacity: 1;
      width: 64px;
      margin-left: 0px;
      margin-top: 0px;
    }
  }
  .user {
    margin-left: 20px;
    color: rgb(153, 153, 153);
    flex: 1 1 auto;
  }
  .user-img {
    display: flex;
    height: 24px;
    align-items: center;
  }
  .user-title {
    font-size: 18px;
    color: rgb(102, 102, 102);
    margin-right: 5px;
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .user-subtitle {
    height: 16px;
    line-height: 16px;
    border-radius: 2px;
    padding: 0px 5px;
    margin-left: 10px;
    font-size: 12px;
    text-align: center;
    color: rgb(255, 44, 84);
    background-color: rgb(255, 242, 244);
    white-space: nowrap;
  }
  .user-item {
    font-size: 12px;
    line-height: 20px;
  }
}
</style>
